<template>
  <p class="booklf-line">
    <span class="booklf-title">{{filterTitle}}：</span>
    <span 
      :class="['booklf-item', i==itemActive?'booklf-item-on':'', 'booklf-item-dynamic-'+global.showType]" 
      @click="changeActive(i, item)" 
      v-for="(item, i) in bindFilterItemData" :key="i">
      {{item.name}}
    </span>
    <span :class="['booklf-item', itemActive==-2?'booklf-item-on':'']">
      <span v-if="cusDesc1 != null" class="cus-val-cont">
        <input v-model="cusInput1" type="text" class="cus-val">{{cusDesc1}} - 
      </span>
      <span v-if="cusDesc2 != null" class="cus-val-cont">
        <input v-model="cusInput2" type="text" class="cus-val">{{cusDesc2}}
      </span>
      <span class="cus-val-excute" v-if="cusDesc1 != null || cusDesc2 != null" @click="changeActiveCus()">确定</span>
    </span>
  </p>
</template>

<script>
export default {
  props:{
    defaultValue:String,
    defaultMinValue:String,
    defaultMaxValue:String,
    // defaultActive:{
    //   type:Number,
    //   default:0
    // },
    filterItem:Array,
    filterNone:{
      type:Boolean,
      default:true
    },
    filterTitle:String,
    filterType:String,
    value1:{
      type:String,
      default:'value'
    },
    value2:String,
    cusDesc1:String,
    cusDesc2:String
  },
  data(){
    return {
      //内部数据变化, 新定义, 不修改外部数据(伴随create)
      // filterItemData:[]
      //-1 默认值与列表值不符, -2 自定义input输入
      itemActive:0,
      lastCusInput1:'',
      lastCusInput2:'',
      cusInput1:'',
      cusInput2:''
    }
  },
  computed:{
    bindFilterItemData(){
      this.itemActive = 0;
      let ritem;
      if(this.filterNone){
        ritem = [{name:"不限"}].concat(this.filterItem);
      }else{
        ritem = this.filterItem;
      }
      //匹配默认值
      if(this.defaultValue != null){
        let hasOne = false;
        for(let i=0,length=ritem.length; i<length; i++){
          let item = ritem[i];
          if(this.defaultValue == item[this.value1]){
            this.itemActive = i;
            hasOne = true;
            break;
          }
        }
        if(!hasOne){
          this.itemActive = -1;
        }
      }else if(this.defaultMinValue != null || this.defaultMaxValue != null){
        //不使用defaultValue且都不匹配的则自定义输入
        let hasOne = false;
        for(let i=0,length=ritem.length; i<length; i++){
          let item = ritem[i];
          //首先输入的最大或最小有值(上面 else if)，其次保证item中最大最小有值，再来比较各自的最大最小值是否相等
          if((item[this.value1] != null || item[this.value2] != null)
            && this.defaultMinValue == item[this.value1]
            && this.defaultMaxValue == item[this.value2]){
            this.itemActive = i;
            hasOne = true;
            break;
          }
        }
        if(!hasOne){
          this.itemActive = -2;
          this.cusInput1 = this.defaultMinValue;
          this.cusInput2 = this.defaultMaxValue;
        }
      }
      return ritem;
    }
  },
  //created只执行一次, 父组件变化后,内部不知道
  created: function(){
    // this.itemActive = this.defaultActive;
    // if(this.filterNone){
    //   this.filterItemData = [{name:"不限"}].concat(this.filterItem);
    // }else{
    //   this.filterItemData = this.filterItem;
    // }
  },
  methods:{
    changeActive(i, item){
      if(i != this.itemActive){
        this.itemActive = i;
        this.$emit('changevalue', this.filterType, item[this.value1], this.value2==null?null:item[this.value2])
      }
    },
    changeActiveCus(){
      if(this.util.isBlank(this.cusInput1) && this.util.isBlank(this.cusInput2)){
        this.$message('请输入自定义值');
        return;
      }
      if(this.cusInput1 != this.lastCusInput1 || this.cusInput2 != this.lastCusInput2){
        this.itemActive = -2;
        this.lastCusInput1 = this.cusInput1;
        this.lastCusInput2 = this.cusInput2;
        this.$emit('changevalue', this.filterType, this.util.isBlank(this.cusInput1)?null:this.cusInput1, this.util.isBlank(this.cusInput2)?null:this.cusInput2);
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.booklf-line {
  margin: 20px 0;
  .booklf-title {
    margin-right: 10px;
    color: #999;
  }
  .booklf-item-dynamic-mobile{
    margin: 0 1px;
  }
  .booklf-item-dynamic-pc{
    margin: 0 15px;
  }
  .booklf-item {
    color: #333;
    .cus-val-cont{
      cursor: text;
      .cus-val{
        outline: none;
        width: 35px;
        margin-right: 5px;
        border: 1px solid #999;
        border-radius: 3px;
      }
    }
    .cus-val-excute{
      margin-left: 5px;
      border: 1px solid #999;
      border-radius: 3px;
      display: inline-block;
      text-align: center;
      width: 35px;
      line-height: 16px;
    }
    .cus-val-excute:hover{
      background-color: #eee;
    }
  }
  .booklf-item-on, .booklf-item-on input, .booklf-item-on .cus-val-excute {
    color: $base-color;
    border-color: $base-color!important;
  }
  .booklf-item:hover {
    cursor: pointer;
  }
}
</style>